【译】什么是CSS Modules ?我们为什么需要他们?

原文地址:https://css-tricks.com/css-modules-part-1-need/

最近我对CSS Modules比较好奇。如果你曾经听说过他们,那么这篇博客正适合你。我们将去探索它的目的和主旨。如果你同样很好奇,敬请关注,在下一篇博文中我们将介绍如何使用CSS Modules。如果你想亲自尝试并且掌握如何使用,第三部分将会很适合你,这一部分剖析了如何在React环境中使用。

什么是CSS Modules?

根据官方的repository介绍,CSS Modules是:

所有的class的名称和动画的名称默认属于本地作用域的CSS文件。
所以CSS Modules不是一个官方的规范,也不是浏览器的一种机制,它是一种构建步骤中的一个进程。(构建通常需要webpack或者browserify的帮助)。通过构建工具的帮助,可以将class的名字或者选择器的名字作用域化。(类似命名空间化。)

这到底是什么呢?我们为什么要这么做呢?我们很快就进行介绍。首先,不要忘记HTML和CSS的工作原理。在HTML中一个类添加:

1
<h1 class="title">An example heading</h1>

在CSS中这个class的定义如下:

1
2
3
.title {
background-color: red;
}

只要CSS被添加到HTML文档上,那个<h1>的背景色就是红色。我们不需要人为处理CSS和HTML文件。浏览器本身自己就理解这些文件的格式。

CSS Modules 和上面的方法不一样。我们不写纯HTML,我们需要在一个类似index.js这样的Javascript 文件中取写我们所有的标签。这里有一个例子来说明这是怎么回事(我们之后将会去看更多真实的实例):

1
2
3
4
5
6
import styles from "./styles.css";

element.innerHTML =
`<h1 class="${styles.title}">
An example heading
</h1>`;

在我们构建的步骤中,编译器将会搜索我们导入的styles.css文件,然后到我们刚刚写的js文件中,通过styles.title使得.title class可用。我们的构建步骤将会同时处理这些东西成为新的,分离的HTML和CSS文件,并且用一个新的字符串去替换HTML和CSS选择器的class。

通过构建工具生成的HTML也许像下面这样:

1
2
3
<h1 class="_styles__title_309571057">
An example heading
</h1>

通过构建工具生成的CSS也许像下面这样:

1
2
3
._styles__title_309571057{
background-color: red;
}

image
class属性和.title选择器已经完全不见了,取而代之的是这个全新的字符串;我们的源CSS文件也没有为浏览器提供服务。
就像Hugo Griaudel在他的这一模块的教程中所说:

[the classes]是动态生成的,唯一的,而且和当前的样式有映射关系的。

这就是样式也有作用域的原因。它们的作用域是特定的模板。如果我们有一个buttons.css文件我们将在buttons.js模板中导入它,并且在css文件内的.btn class相对于其他模板(例如forms.js)也是不可用的,除非我们在这个文件中同样导入了进来。

为什么我们想要把CSS和HTML搞成这样?我们这样做的真真正正的原因是什么?

为什么我们要用CSS Modules?

有了CSS Modules,就可以确保所有的样式能够服务于单个组件:

  1. 集中在一个地方
  2. 只应用于那个组件,其他组件不适用
    除此之外,任何组件都能拥有真正的依赖,就像下面这样:
1
2
3
4
import buttons from "./buttons.css";
import padding from "./padding.css";

element.innerHTML = `<div class="${buttons.red}${padding.large}">`;

这样设计的目的在于解决CSS中的全局作用域问题。

你曾有过为了提升效率,节省时间去简略的写css吗?而且是在完全不考虑你会不会影响其他代码的情况下?

你曾有过在样式表的底部随机打了一些的比特和垃圾,然后尝试回过头来重新去组织但是从来没这么做吗?

你曾有过看到样式却不完全知道它的意义的时候吗?即使它们被用在了当前的标签上?

你曾有过思考如何去不破坏任何东西的情况下,去弃用一些现有的样式吗?考虑过这些样式是仅仅作用于自己还是依赖其它样式呢?或者是在哪里重新覆盖了样式了?

这些问题会让人很头痛,项目时间紧张,而你的心思又在窗外的花花世界。

但是当你有了CSS Modules之后,关键是这种默认本地作用域的概念,这个问题将会被避免。你必须去思考写样式的方便性。

例如,如果你在不应用CSS module-style class去做转换的情况下,在HTML中使用random-gross-class,这个样式将不会被应用,因为这个选择器将会被转换为._style_random-gross-class_0038089.

composes 关键词

我们现在拥有一个叫做type.css的模块去渲染text样式。在那个文件中,我们也许会有如下代码:

1
2
3
4
5
6
7
8
.serif-font {
font-family: Georgia,serif;
}
.display {
composes: serif-font;
font-size: 30px;
line-height: 35px;
}

我们将在我们的模板中声明class:

1
2
3
4
5
6
7
import type from "./type.css";
element.innerHTML =
`
<h1 class="${type.display}">
This is a heading
</h1>;
`

编译后的模板上的标签会是下面这样:

1
2
3
<h1 class="_type__display_0980340 _type_serif_404840">
Heading title
</h1>

使用composes关键词汇将2个class都绑定到元素上,从而避免了类似解决方案的一些问题,类似Sass中的@extend。

我们甚至可以在一个分离的CSS文件中去compose,从而实现继承。

1
2
3
4
5
.element{
compose: dark-red from "./colors.css";
font-size: 30px;
line-height: 1.2;
}

不需要BEM

在构建CSS module的过程中,不需要BEM。有2个原因:

  1. 易解析- 类似type.display这样的代码,对于开发者来说就像BEM-y的.font-size__serif–large。当BEM选择器变长时,可能更容易被理解。
  2. 本地作用域- 比如我们在模块中有一个类似.big去修改font-size属性的class。同样我们可能还会用.big去同时增大padding和font-size。这没关系!他们不会冲突,因为作用域中的样式是有各自意义的。甚至一个module引入2个样式表,然后它有通常的名字我们的构建工具会为那个class加上前缀作区分。换句话说:CSS modules消除了特殊性问题。

很酷,难道不是吗?

这些仅仅是CSS Modules的部分优点。

如果你想学习更多,Glen Madden写了更多的这样做的好处。

这个系列的下一篇文章将会去探索如何在项目中使用Webpack和CSS Modules。我们将使用最新的ES2015的特性去实现,也会给出一些代码例子去引导大家去理解。